<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Binary (On/Off) Hot Water Temperature Control</title>
  <script type="text/javascript" src="../../highlight.pack.js"></script>
  <script type="text/javascript" src="../../highlightCode.js"></script>
  <link href='../../highlight.css' rel='stylesheet' />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
  <script type="text/javascript" src="../AnalogGaugeObject/analogGaugeObject.js"></script>



  <style type="text/css">

  .noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
       unselectable="on"
 onselectstart="return false;"
 onmousedown="return false;"
}
.grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
}

  </style>

</head>
<body style='padding:10px;font-family:arial'>
<center>
<h4>Binary (On/Off) Hot Water Temperature Control</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>

</div>
<table><tr>
<td style=width:400px;>
<div style="padding:10px;width:400px;text-align:justify;height:560px;overflow-y:auto">

<b>Scenerio:</b><br />

</div>
</td>

<td style=width:800px;>
<div id="svgDiv" style='border:1px solid black;width:800px;height:560px;'>
<svg id=mySVG width=800 height=560>
<!--Controller Diagram-->
<svg xmlns="http://www.w3.org/2000/svg" id="DataDisc1508700025116" overflow="visible" by="FJH" description="Binary (On/Off) Hot Water Temperature Control" discTag="hw1" width="194" height="161.320556640625" Date="Sun Oct 22 15:20:25 EDT 2017" gmtMS="1508700025116">
<defs>
<marker id="arrowEnd" viewBox="0 0 8000 8000" refX="280" refY="150" markerUnits="strokeWidth" markerWidth="300" markerHeight="300" orient="auto" fill="red" stroke-linejoin="bevel">
<path id="arrowEndPath" stroke="RGB(0,0,0)" stroke-width="5" d="M2 59,293 148,1 243,121 151,Z"/>
</marker>
</defs>
<g discTag="hw1" transform="translate(50,40)scale(.5)">
<line stroke="Teal" strokeCode="25" stroke-width="2" x1="0" y1="-60" x2="0" y2="60"/>
<path fill="LightBlue" stroke="Teal" fillCode="11" strokeCode="25" stroke-width="2" marker-end="url(#arrowEnd)" d="M0,0 v-60 a120,60 0 0,0 120,60"/>
<path fill="LightBlue" stroke="Teal" fillCode="11" strokeCode="25" stroke-width="2" marker-end="url(#arrowEnd)" d="M0,0 v60 a120,60 0 0,1 120,-60"/>
<rect fill="Crimson" stroke="darkorchid" fillCode="8" strokeCode="38" stroke-width="4" width="100" height="60" x="-50" y="-30" rx="15" ry="15"/>
<circle fill="GreenYellow" stroke="blue" fillCode="6" strokeCode="10" stroke-width="4" cx="0" cy="0" r="33"/>
<text id="discTag" fill="black" x="0" y="-12" font-size="16" font-family="arial" text-anchor="middle">
hw1</text>
<g atTag="@HW1" id="SatA_7" fill="Red" stroke="black" stroke-width="2" transform="translate(0,-70)scale(.4)" class="SatTop" description="Heating Hot Water Sypply Temperature">
<polygon points="10.8253 6.25 25 0.00000149011 10.8253 -6.25 12.5 -21.6507 0.00000149011 -12.5 -12.5 -21.6507 -10.8253 -6.25 -25 0.00000149011 -10.8253 6.25 -12.5 21.6507 0.00000149011 12.5 12.5 21.6507"/>
</g>
<g atTag="@HW1" id="SatX_2" fill="SpringGreen" stroke="black" stroke-width="2" transform="translate(0,70)scale(.4)" class="SatBot" description="Network Connection">
<polygon points="-0.0000075102 21.6507 25 -21.6507 -25 -21.6507"/>
</g>
<g id="SatKK_32" fill="magenta" stroke="black" stroke-width="2" transform="translate(130,0)scale(.4)" class="SatRight" atTag="@hw1" description="Control Relay">
<polygon points="25 25 25 -25 -25 -25 -25 25"/>
<line x1="-25" y1="-25" x2="25" y2="25" stroke-width="4"/>
</g>
</g>
</svg>
<!--System Flow Diagram-->

<!--Sensors/Actuators-->
<g id="primarySensor" fill="Red" stroke="black" stroke-width="2" transform="translate(400,180)scale(.6)" class="SatTop" description="Heating Hot Water Sypply Temperature">
<polygon points="10.8253 6.25 25 0.00000149011 10.8253 -6.25 12.5 -21.6507 0.00000149011 -12.5 -12.5 -21.6507 -10.8253 -6.25 -25 0.00000149011 -10.8253 6.25 -12.5 21.6507 0.00000149011 12.5 12.5 21.6507"/>
</g>
<g id="actuator" fill="magenta" stroke="black" stroke-width="2" transform="translate(750,480)scale(.6)" class="SatRight" atTag="@hw1" description="Control Relay">
<polygon points="25 25 25 -25 -25 -25 -25 25"/>
<line x1="-25" y1="-25" x2="25" y2="25" stroke-width="4"/>
</g>

<line id="centerLine" x1=400 y1="180" x2=400 y2=560 stroke-width="1" stroke="gainsboro" />
<!--Charts/Graphs-->
<g id="pvStripChart" transform="translate(500,130)" />
<!--Controller Body-->
<g id=controllerG>
<rect  fill="Crimson" stroke="darkorchid"  stroke-width="4" width="200" height="120" x="300" y="420" rx="15" ry="15"/>
 <foreignObject id=foAdjust width=300 height=100 x=310 y=425>
<table cellpadding=0>
<tr><td align=center colspan=5>Set Controller:<input type="checkbox" id=adjustControllerCheck onClick=adjustControllerChecked() /></td></tr>
    <tr align=center>
    <td>Set Point:<input  disabled style="margin-right: 0px;margin-left: 0px;"  type="radio" name=tuneRadio id=tuneSPClick onClick=tuneSPClicked() /></td>
    <td>Differential:<input style="margin-right: 0px;margin-left: 0px;"   disabled  type="radio" name=tuneRadio  id=tuneDiffClick onClick=tuneDiffClicked()   /></td>
    </tr>
    <tr align=center>
    <td><input onfocus=blur() type="text" style=width:40px id=tuneSPValue value=140 /></td>
    <td>&nbsp;&nbsp;<input onfocus=blur()  type="text" style=width:40px  id=tuneDiffValue value=10 /></td>
        </tr>
    <tr><td align=center colspan=3>
        <TABLE >
        <TR>
        <TD><button  onClick=controlAdjust(-1) style=padding:0;width:30px;height:30px><img src="../Images/minusRound.png" alt="" width=25 height=25 /></button></TD>
        <TD>
            <select id=incrementSelect title="Increment value">
              <option value="">.10</option>
              <option value="">.50</option>
              <option selected value="">1.0</option>
              <option value="">5.0</option>
              <option value="">10</option>

            </select>
        </TD>
        <TD><button  onClick=controlAdjust(1) style=padding:0;width:30px;height:30px><img src="../Images/plusRound.png" alt="" width=25 height=25 /></button></TD>
        </TR>
        </TABLE>
    </td></tr>
</table>
</foreignObject>
</g>
<!--Connecting Lines-->
<defs>
<marker id="arrowEndBlue" viewBox="0 0 8000 8000" refX="280" refY="150" markerUnits="strokeWidth" markerWidth="300" markerHeight="300" orient="auto" fill="blue" stroke-linejoin="bevel">
<path id="arrowEndPath" stroke="RGB(0,0,0)" stroke-width="5" d="M2 59,293 148,1 243,121 151,Z"/>
</marker>
</defs>
<line x1="400" y1="190" x2="400" y2="420"  id=primarySensorLine stroke="red" stroke-width="2" marker-end="url(#arrowEnd)" />
<line x1="500" y1="480" x2="738" y2="480"  id=actuatorLine stroke="blue" stroke-width="2" marker-end="url(#arrowEndBlue)" />
<!--Gauges/Pilot Lights-->
<defs>
<radialGradient id="greenGradient" cx="50%" cy="50%" r="75%" >
<stop offset="0%" style="stop-color:rgb(0,191,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
</radialGradient>
<radialGradient id="greyGradient" cx="50%" cy="50%" r="75%" >
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
</radialGradient>
<radialGradient id="orangeGradient" cx="50%" cy="50%" r="75%" >
<stop offset="0%" style="stop-color:orange;stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
</radialGradient>
</defs>

<g id=pilotLightActuatorG transform="translate(560,480)scale(15)"><circle id=pilotLightActuator cx="0" cy="0" r="1"  fill="url(#greyGradient)" /><line style="visibility:visible" name=lineOff x1=-.5 y1=-.5 x2=.5 y2=.5 stroke='black' stroke-width=.1 /><line  style="visibility:visible"  name=lineDisabled x1=.5 y1=-.5 x2=-.5 y2=.5 stroke='black' stroke-width=.1 /><circle  style="visibility:hidden"  name=circleDefective cx=0 cy=0 r=.8 stroke='red' stroke-width=.1 fill="none" /></g>
<g id=gaugeHWSGaugeContainer transform='translate(400,280)' />

<!--Text/Labels-->


</svg>
</div>

</td>
</tr></table>
  <br />SVG Source:
  <div id=svgSourceDiv style=overflow:auto;width:100%;height:1px;text-align:left; /></div>
  Javascript:
  <div id=jsCodeDiv style=overflow:auto;width:100%;text-align:left; /></div><p></p>
</center>
<script id=myScript>
function buildPVStripChart()
{

var width=200
var height=200

//  X scale will use the index of our data
var xScale = d3.scaleLinear()
    .domain([0, 60]) // 60 minutes
    .range([0, width]); // output

// Y scale will use the randomly generate number
var yScale = d3.scaleLinear()
    .domain([80, 220]) // input
    .range([height, 0]); // output

  // gridlines in x axis function
function make_x_gridlines() {
    return d3.axisBottom(xScale)
       // .ticks(5)
}

// gridlines in y axis function
function make_y_gridlines() {
    return d3.axisLeft(yScale)
       // .ticks(5)
}

var graphG=d3.select("#pvStripChart")
// add the X gridlines
  graphG.append("g")
      .attr("class", "grid")
      .attr("transform", "translate(0," + height + ")")
      .call(make_x_gridlines()
          .tickSize(-height)
          .tickFormat("")
      )

  // add the Y gridlines
  graphG.append("g")
      .attr("class", "grid")
      .call(make_y_gridlines()
          .tickSize(-width)
          .tickFormat("")
      )



// Call the x axis in a group tag
graphG.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom

// Call the y axis in a group tag
graphG.append("g")
    .attr("class", "y axis")
    .call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft





}

//---onload this page---
function createGauges() //----this application configuration----
{   // createGauge(name, label, min, max, majorTicks, minorTicks, ringColor, faceColor, diameter, orangeZoneRange, redZoneRange, greenZoneRange,units)<br>

    createGauge("gaugeHWS", "HWS",80,220,5,10,"red","yellow",120,[180,200],[200,220],null,"\u00B0F");
}

</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{   buildPVStripChart()
    createGauges()

   	showSourceSVG()
	showSourceJS()

}


</script>
<script>
/*
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-88028738-1', 'auto');
  ga('send', 'pageview');
  */

</script>

</body>

</html>